<template>
	<view class="xczxxczcstrt pd pt20 bgff">
		<template v-for="(item,index) in 5">
			<view class="" @tap="fdfdsfdtr">
				<view class="">
					<image class="xzczxstre cz" mode="aspectFill" src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/case/%E8%96%AA%E6%99%BA%E7%9B%B4%E8%81%98/haibao1.png"></image>
				</view>
				<view class="mt20 fz32 cen">
					海报名称
				</view>
			</view>
			<view class="" @tap="fdfdsfdtr">
				<view class="">
					<image class="xzczxstre cz" mode="aspectFill" src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/case/%E8%96%AA%E6%99%BA%E7%9B%B4%E8%81%98/haibao2.png"></image>
				</view>
				<view class="mt20 fz32 cen">
					海报名称
				</view>
			</view>
		</template>
	</view>
	
	<view class="lkxzcxzcrer vertical-center" v-if="kjjxczx">
		<view class="pr">
			<view class=" tr fdsfxtretre">
				<icon class="iconfont icon-14CIRCLE fz60 cf" @tap="kjjxczx=false"></icon>
			</view>
			<image
				src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/case/%E8%96%AA%E6%99%BA%E7%9B%B4%E8%81%98/haobai.png"
				class="xczxcrtexzewr"></image>
			<view class="mt20">
				<button type="primary"
					@tap="kmnxcz('https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/case/%E8%96%AA%E6%99%BA%E7%9B%B4%E8%81%98/haobai.png')">
					<icon class="iconfont icon-xiazai cz fz40"></icon>
					<text class="fz32 cz ml20">保存图片</text>
				</button>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue"
	import {
		onLoad,
		onPageScroll,
		onShow,
		onShareAppMessage
	} from "@dcloudio/uni-app";
	import { dxrequest } from "@/util/index.js"
	const kjjxczx = ref();
	
	
	const kmnxcz = (url) => {
		uni.showLoading({
			title: "下载中"
		})
		uni.downloadFile({
			url, //仅为示例，并非真实的资源
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function () {
							uni.hideLoading()
							uni.showToast({
								title: "保存成功！"
							})
						}
					});
				}
			},
			complete: (data) => {
				console.log(data)
			}
		});
	}
	const fdfdsfdtr = ()=>{
		uni.showLoading({
			title: "生成中..."
		})
		setTimeout(a => {
			uni.hideLoading()
			kjjxczx.value = true
		}, 2000)
	}
</script>

<style scoped>
	.xczxxczcstrt {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(1, 1fr);
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx
	}
	.xzczxstre{
		width: 100%;
		height: 500rpx;
		border-radius: 20rpx;
	}
</style>